<template>
	<view>
		<view class="body">
			<uni-forms :value="formData" ref="form" :rules="rules">
				<uni-group>

					<uni-forms-item label="户籍详细地址" required labelWidth="120" name="ssq">
						<!-- <uni-data-picker placeholder="请选择省市区" popup-title="请选择城市" collection="opendb-city-china"
							field="code as value, name as text" orderby="value asc" :step-searh="true"
							self-field="value" parent-field="parent_code" @change="ssq_chage" @nodeclick="node">
						</uni-data-picker> -->

						<uni-easyinput  v-model="formData.ssq" placeholder="请输入详细地址" style="margin-top: 5px;">
						</uni-easyinput>
					</uni-forms-item>
					
					<uni-forms-item label="生源地(省/市)" required labelWidth="120" name="syd">
						
					
						<uni-easyinput  v-model="formData.syd" placeholder="例如:广东省韶关市" style="margin-top: 5px;">
						</uni-easyinput>
					</uni-forms-item>

					<uni-forms-item label="邮政编码" name="post_code" labelWidth="120">
						<uni-easyinput v-model="formData.post_code"></uni-easyinput>
					</uni-forms-item>

					<uni-forms-item label="家庭电话" name="f_tel" required labelWidth="120">
						<uni-easyinput placeholder="座机或家长电话" v-model="formData.f_tel"></uni-easyinput>
					</uni-forms-item>

					<uni-forms-item label="家庭人均年收入" name="income_year" required labelWidth="120">
						<uni-easyinput placeholder="单位:元" v-model="formData.income_year"></uni-easyinput>
					</uni-forms-item>




				</uni-group>

				<uni-group title="家庭成员情况(直系亲属,含祖父母)">
					<uni-forms-item labelWidth="120" required="" label="添加家庭成员信息" name="family_forms">
						<button size="mini" type="primary" @click="addFamilyinfo()">添加</button>
					</uni-forms-item>

					<uni-list>
						<uni-list-item direction="row">
							<template slot="body">
								<view>
									<text style="color: #000000;">姓名</text>
									<text style="margin-left: 25px;color: #000000;">关系</text>
									<text style="margin-left: 45px;color: #000000;">联系电话</text>
									<text style="margin-left: 45px;color: #000000;">操作</text>
								</view>
							</template>
						</uni-list-item>

						<uni-list-item v-for="(v,i) in formData.family_forms" :key="v.name" direction="row" >
							<template slot="body">
								<view class="fa_list" @click="info(i)">
									<text>{{v.name}}</text>
									<text>{{v.relationship}}</text>
									<text>{{v.tel}}</text>
									<button @click="del_family(i,v.name)"
										style="background-color: #ef5350;color: #fff;font-size: 12px;"
										size="mini">删除</button>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</uni-group>

				<uni-group title="家庭情况简述" margin-top="">
					<uni-forms-item label="内容" name="jbqkjs" required >
						<uni-easyinput type="textarea" placeholder="成员情况、在读情况、患病情况、致贫原因等" v-model="formData.jbqkjs"></uni-easyinput>
					</uni-forms-item>
				</uni-group>
				<uni-group>
					<button @click="submit" type="primary">下一页(3/5)</button>
				</uni-group>



			</uni-forms>
		</view>
		<!-- 弹出层 -->
		<uni-popup ref="popup" :maskClick="disable">

			<view class="info">

				<view class="pop_title">
					<text>添加家庭成员信息</text>
				</view>

				<view class="scroll">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="pop_root">
							<uni-forms :value="family" ref="popup_forms" :rules="popup_rules">

								<uni-group>
									<uni-forms-item label="姓名" labelWidth="100" name="name" required>
										<uni-easyinput v-model="family.name"></uni-easyinput>
									</uni-forms-item>

									<uni-forms-item label="年龄" labelWidth="100" name="age" required>
										<uni-easyinput v-model="family.age"></uni-easyinput>
									</uni-forms-item>

									<uni-forms-item label="与学生关系" labelWidth="100" name="relationship" required>
										<uni-easyinput v-model="family.relationship"></uni-easyinput>
									</uni-forms-item>

									<uni-forms-item label="工作(学习)单位" labelWidth="100" name="work_unit" required>
										<uni-easyinput v-model="family.work_unit"></uni-easyinput>
									</uni-forms-item>

									<uni-forms-item label="联系电话" labelWidth="100" name="tel" required>
										<uni-easyinput v-model="family.tel"></uni-easyinput>
									</uni-forms-item>

									<uni-forms-item label="从业情况" labelWidth="100" name="Employment" required>
										<uni-easyinput v-model="family.Employment"></uni-easyinput>
									</uni-forms-item>

									<uni-forms-item label="文化程度" labelWidth="100" name="edu" required>
										<uni-easyinput v-model="family.edu"></uni-easyinput>

									</uni-forms-item>

									<uni-forms-item label="年收入" labelWidth="100" name="income_year" required>
										<uni-easyinput v-model="family.income_year"></uni-easyinput>
									</uni-forms-item>

									<uni-forms-item  label="健康状态" labelWidth="100" name="hea_state" required>
										<uni-easyinput type="textarea" placeholder="良好/一般/患重大疾病(疾病名称)/残疾" v-model="family.hea_state"></uni-easyinput>
									</uni-forms-item>
									<view class="">
										<text style="color: #F43559;font-size: 15px;">1.重大疾病项需提供二甲及以上医院出具的诊断书</text>
									</view>
									<view class="">
										<text style="color: #F43559;font-size: 15px;">2.残疾项需提供残疾证复印件</text>
									</view>
								</uni-group>
							</uni-forms>
						</view>



					</scroll-view>
					<view class="pop_button">
						<button type="primary" size="mini" @click="confirm">确认添加</button>
						<button type="primary" size="mini" @click="cancel">取消</button>

					</view>
				</view>



			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					ssq: '',
					post_code: '',
					f_tel: '',
					income_year: '',
					family_forms: [],
					syd:'',
					jbqkjs:''
				},
				hea_state_range: ['良好','一般','患重大疾病','残疾'],
				family: {
					name: '',
					age: '',
					relationship: '',
					work_unit: '',
					tel: '',
					Employment: '',
					edu: '',
					income_year: '',
					hea_state: ''
				},
				disable: false,
				//列表渲染 
				familylist: [],

				rules: {
					ssq: {
						rules: [{
							required: true,
							errorMessage: '请填写户籍地址'
						}]
					},
					f_tel: {
						rules: [{
							required: true,
							errorMessage: '请输入家庭电话'
						}]
					},
					income_year: {
						rules: [{
							required: true,
							errorMessage: '请输入家庭人均年收入'
						}]
					},
					syd: {
						rules: [{
							required: true,
							errorMessage: '请输入生源地'
						}]
					},
					jbqkjs: {
						rules: [{
							required: true,
							errorMessage: '请输入家庭情况简述'
						}]
					}

				},
				popup_rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '请输入年龄'
						}]
					},
					relationship: {
						rules: [{
							required: true,
							errorMessage: '请输入与学生关系'
						}]
					},
					work_unit: {
						rules: [{
							required: true,
							errorMessage: '请输入工作(学习)单位'
						}]
					},
					tel: {
						rules: [{
							required: true,
							errorMessage: '请输入联系方式,没有请填“无”'
						}, ]
					},
					Employment: {
						rules: [{
							required: true,
							errorMessage: '请输入从业情况'
						}]
					},
					edu: {
						rules: [{
							required: true,
							errorMessage: '请输入文化程度'
						}]
					},
					income_year: {
						rules: [{
							required: true,
							errorMessage: '请输入年收入'
						}]
					},
					hea_state: {
						rules: [{
							required: true,
							errorMessage: '请输入健康状况'
						}]
					}
				}
			}

		},
		methods: {
			addFamilyinfo() {
				this.$refs.popup.open()

			},
			onchange(e) {
				this.family.hea_state = e[0]
			},
			//弹出层确认按钮函数
			confirm() {
				// 输入框的值
				// console.log(value)
				// TODO 做一些其他的事情，手动执行 done 才会关闭对话框
				// ...
				// done()
				//为弹出层表单配置校验规则
				// this.$refs.popup.close();
				this.$refs.popup_forms.setRules(this.popup_rules)

				this.$refs.popup_forms.submit().then(res => {

					//向form表单family_forms添加数据
					this.formData.family_forms.push(this.family)
					var i = {
						name: this.family.name,
						rs: this.family.relationship,
						tel: this.family.tel
					}

					//向家庭成员列表视图驱动添加数据
					this.familylist.push(i)
					this.family = {
						name: '',
						age: '',
						relationship: '',
						work_unit: '',
						tel: '',
						Employment: '',
						edu: '',
						income_year: '',
						hea_state: ''
					}
					//恢复弹出层表单默认值
					this.$refs.popup.close();
					uni.showToast({
						icon: 'none',
						title: '已添加',
						duration: 500
					})

				}).catch(err => {
					console.log(err)
				})


			},
			cancel() {
				this.$refs.popup.close();
			},
			submit() {
				this.$refs.form.submit().then(res => {
					console.log('表单数据信息：', res);
					getApp().globalData.kunnan.familyInfo = res
					uni.setStorage({
						key: 'kunnan_info',
						data: getApp().globalData.kunnan
					})
					uni.navigateTo({
						url: 'income'
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})

			},
			// ssq_chage(e) {
			// 	// console.log(e)
			// 	const value = e

			// 	console.log(value)
			// 	var info = {
			// 		sheng: e[0],
			// 		shi: e[1],
			// 		qu: e[2],
			// 		detail: ''
			// 	}
			// 	var ssq = ''
			// 	const db = uniCloud.database()
			// 	db.collection('opendb-city-china').where({
			// 		code:e[0],
					
			// 	}).get({getOne:true}).then((res) => {
			// 		// console.log(res)
			// 		ssq = res.result.data.name
			// 		db.collection('opendb-city-china').where({
			// 			code:e[1]
			// 		}).get({getOne:true}).then((res) =>{
			// 			ssq = ssq + res.result.data.name
			// 			db.collection('opendb-city-china').where({
			// 				code:e[2]
			// 			}).get({getOne:true}).then((res) =>{
			// 				ssq = ssq + res.result.data.name
			// 				this.formData.ssq = ssq
			// 				console.log(ssq)
			// 			})
			// 		})
			// 	})
				
				
			// },
		
			

			//删除家庭成员
			del_family(e,name) {
				uni.showModal({
					title: '提示',
					content: '确认删除“' + name + '”成员信息吗？',
					success: (res) => {
						if(res.confirm){
							this.formData.family_forms.splice(e,1)
						}
					}
				})
			},
			hea_change(e){
				this.family.hea_state = this.hea_state_range[e.detail.value]
				// console.log(e)
			},
			info(e){
				// this.family = this.family_forms[e]
				// this.$refs.popup.open()
			}
		},
		onLoad: function() {
			uni.showLoading({
				title: '加载中'
			})
			uni.getStorage({
				key: 'kunnan_info',
				success: (res) => {
					getApp().globalData.kunnan = res.data
					if (res.data.familyInfo != undefined) {
						// console.log('nnnn')

						this.formData = res.data.familyInfo
						// this.familylist = res.data.familyInfo
					}

					setTimeout(function() {
						uni.hideLoading();
					}, 300);
				},
				fail: () => {
					setTimeout(function() {
						uni.hideLoading();
					}, 300);
				}
			})
		},
		onReady: function() {
			// this.$refs.form.setRules(this.rules)

		},
		mounted: function() {

		}
	}
</script>

<style>
	.pop_title {

		text-align: center;
		color: #000000;
	}

	.info {
		width: 650rpx;
		/* height: 50px; */
		background-color: #fff;
		border-radius: 8px;
		padding: 5px 0;
	}


	@media screen and (max-height: 800px) {
		.scroll-Y {
			height: 500px;
		}
	}

	@media screen and (max-height: 700px) {
		.scroll-Y {
			height: 450px;
		}
	}

	@media screen and (max-height: 600px) {
		.scroll-Y {
			height: 350px;
		}
	}




	.pop_button {
		padding: 15px 0 0;
		display: flex;
		justify-content: center;
		border-top: .8px solid #eee;
	}

	.pop_button button {
		height: 35px;

		line-height: 35px;
	}

	.scroll {
		margin: 2px;
	}

	.sel {
		text-align: center;
		width: 250rpx;
		background-color: #FFFFFF;
		height: 36px;
		border: .8px solid #eee;
		border-radius: 4px;
		line-height: 36px;
		/* box-sizing: border-box; */
		margin: 10px 10px;
		/* padding-left: 10px;
		padding-right: 10px; */
		color: rgb(128, 128, 128);
	}



	.sel image {
		float: right;
		width: 20px;
		height: 20px;
		margin-top: 8px;
		margin-right: 4px;
	}

	.fa_list {
		display: flex;
		justify-content: space-around;

	}

	.fa_list text:nth-child(1) {
		width: 60px;
	}

	.fa_list text:nth-child(2) {
		width: 60px;
	}

	.fa_list text:nth-child(3) {
		width: 115px;
	}
</style>
